<style lang="less">
@import url("./../style/anli.less");
</style>

<template>
  <div class="anli">
    <!-- <div class="list" v-if="!isDetail" :style="{'margin-bottom':offsetHeight-100+'px'}"> -->
    <div class="list" v-if="!isDetail">
      <div class="header1">
        <h3>融创客户案例展示</h3>
        <span>客户遍布在中国内地,港台,新加坡,日本,澳大利亚,柬埔寨,英美等全国各地,涉及各个领域</span>
      </div>
      <div style="margin-bottom:50px">
        <ul class="ul-content">
          <li :class="{'li-active':currentTab == 0}" @click="setTab({no:0})">全部</li>
          <li :class="{'li-active':currentTab == el}" v-for="(el,index) in typeList" :key="index" :value="el.no" @click="setTab(el)">{{el.title}}</li>
        </ul>
        <div class="box-content-min">
          <ul>
            <li v-for="(el,index) in imgList" @click="setDetail(el.no)">
              <div>
                <img :src="el.thumb_pic" alt="">
              </div>
              <div class="desc">
                <h3>{{el.title}}</h3>
                <p>{{el.description}}</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="box-content" :style="styleImg">
          <div class="box" @click="setDetail(el.no)" v-for="(el,index) in imgList" :key="index">
            <div class="pic" :style="{'width':width+'px'}">
              <img :style="{'width':(width-20)+'px'}" :src="el.thumb_pic" alt="">
              <div>
                <div class="desc-content">
                  <h3>{{el.title}}</h3>
                  <p>{{el.description}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-if="isDetail">
      <detail :info="detailInfo"></detail>
    </template>
  </div>
</template>

<script>
import vueWaterfallEasy from "vue-waterfall-easy";
import detail from "./detail.vue";
import { isFlowBaseAnnotation } from "babel-types";
export default {
  components: {
    vueWaterfallEasy,
    detail
  },
  data() {
    return {
      width: document.body.clientWidth / 3,
      wdith: 300,
      currentTab: 0,
      isDetail: false,
      detailId: "",
      typeList: [],
      detailInfo: {},
      styleImg: {
        "-webkit-column-width": 0,
        "column-width": 0,
        "-ms-column-width": 0,
        "-o-column-width": 0,
        "-moz-column-width": 0
      },
      imgList: []
    };
  },
  mounted() {
    this.init();
    // this.$nextTick(res => {
    // setTimeout(() => {
    //   this.offsetHeight =
    //     document.documentElement.scrollHeight || document.body.scrollHeight;
    // }, 200);
    // });
    this.setImgWidth();
  },
  methods: {
    init() {
      this.$axios.get("/api/category.php").then(res => {
        this.typeList = res.data.result.data.data || [];
      });

      this.getProduct();
    },
    setImgWidth() {
      let width = document.documentElement.clientWidth - 60;
      this.width = width / 4 - 30;
      this.styleImg = {
        "-webkit-column-width": this.width + "px",
        columnWidth: this.width + "px",
        "-ms-column-width": this.width + "px",
        "-o-column-width": this.width + "px",
        "-moz-column-width": this.width + "px"
      };
    },
    getProduct(id = null) {
      let data = {};
      if (id) {
        data.category_no = id;
      }
      this.imgList = [];
      this.$axios.get("/api/product.php", { params: data }).then(res => {
        let list = res.data.result.data.data ? res.data.result.data.data : [];
        this.imgList = list;
        // console.log(list);
        // let arr = [];
        // for (let i = 0; i < list.length; i++) {
        //   arr.push({
        //     src: list[i].banner_pic,
        //     // link: "http://www.baidu.com",
        //     no: list[i].no,
        //     title: list[i].title,
        //     description: list[i].description || ""
        //   });
        // }
        // this.imgList = arr;
        // setTimeout(() => {
        //   this.$refs.waterfall.imgsArr = [];
        //   this.offsetHeight =
        //     document.documentElement.scrollHeight || document.body.scrollHeight;
        // }, 200);
      });
    },
    setTab(el) {
      this.currentTab = el;
      this.getProduct(el.no);
    },
    setDetail(id) {
      let data = {
        no: id
      };
      this.$axios.get("/api/product_detail.php", { params: data }).then(res => {
        this.isDetail = true;
        this.detailInfo = res.data.result.data;
      });
    }
  }
};
</script>

<style lang="less" scoped>

</style>
